
 <!--事件统计 -->  
<template>
  <div>
       <!-- 搜索栏 -->  
    <div class="search-wrapper">
     <ul class="search-box">
          <li><span class="filter-name">统计月度：</span>   <!-- 月份组件？ -->
          <el-date-picker v-model="value5"  :picker-options="pickerOptions2"    align="right" @change="currentSel"/>         
          </li>
          <li><span class="filter-name">事件来源：</span>
          <el-select v-model="value" placeholder="请选择" clearable  style="width:150px" class="filter-item"  @change="currentSel" >
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select></li>
          <li><span class="filter-name">事件状态：</span>
          <el-select v-model="value" placeholder="请选择" clearable style="width:150px" class="filter-item"  @change="currentSel" >
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select></li> 
          <li><span class="filter-name">事件类型：</span>
          <el-select v-model="value" placeholder="请选择" clearable style="width:130px" class="filter-item"  @change="currentSel" >
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select></li>

          <!-- 选择筛选条件，触发内容改变事件——根据筛选条件查询列表 -->
          
         <!--  <li style="padding-left:10px;"><el-button style="vertical-align:middle;margin-top:-2px;" round size="mini" type="primary" @click="handSearch(value)">查询</el-button>
          </li> -->
        </ul>
    </div>
   <!-- 列表数据 -->  
      <div class="data-wrapper">
        <template v-if="tableData3!=null">
        <el-table ref="multipleTable" :data="tableData3"  tooltip-effect="dark" style="width: 100%"
    @selection-change="handleSelectionChange">
          <el-table-column type="selection" label="全选" width="50">
          </el-table-column>
          <el-table-column type="index" label="序号" :index="indexMethod" width="50">
          </el-table-column>
          <el-table-column prop="eName" label="事件名称" sortable width="100">
          </el-table-column>
          <el-table-column prop="eCode"  label="事件编号" width="100">
          </el-table-column>
          <el-table-column prop="typeName" label="事件类别"  width="100">
          </el-table-column>
          <el-table-column prop="userName" label="事件状态"  width="100">
          </el-table-column>
          <el-table-column prop="eSource" label="事件来源" width="100">
          </el-table-column>
          <el-table-column prop="riverId" label="所涉河道" sortable width="100">
          </el-table-column>
            <el-table-column prop="riverManage" label="对应河长" sortable width="100">
          </el-table-column>
            <el-table-column prop="regId" label="统计月度" sortable width="100">
          </el-table-column>
            <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="small" type="primary" plain
            @click=" handleView(scope.$index, scope.row)">查看</el-button>
        </template>
      </el-table-column>
        </el-table>
        </template>
      </div>

 <!-- 批量删除与分页栏 -->
      <el-row :gutter="20" type="flex" justify="space-between" align="center" class="page-wrapper">   
       <!--  <el-col :span="4">
          <div class="grid-content">
            <el-button type="primary">批量导入</el-button>
          </div>
        </el-col> -->
        <el-col :span="20">
          <div class="page-item">
            <el-pagination background  @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="40"/>
          </div>
        </el-col>
      </el-row>
  </div>
</template>

 <!-- js代码 -->
<script>
  import axios from 'axios';
export default {
  data() {
      return {
        options:[{
          value: 'Leanne Graham111',
          label: 'Leanne Graham333'
        }],
        value: '',
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value5: '',
        tableData3:[
          {
          eName:"河上垃圾",
          eCode:"1001",
          typeName:"河面污染",
          userName:"张三",
          eSource:"群众举报",
          riverId:"长江",
          riverManage:"李四",
          regId:"3月"
        },
        {
         eName:"水质污染",
          eCode:"1002",
          typeName:"河上垃圾",
          userName:"李四",
          eSource:"巡河发现",
          riverId:"优",
          riverManage:"李四",
          regId:"3月"
        },
        {
          eName:"河道污染",
          eCode:"1003",
          typeName:"水质污染",
          userName:"张三",
          eSource:"巡河发现",
          riverId:"优",
          riverManage:"李四",
          regId:"3月"
        },
        {
          eName:"污染名称",
          eCode:"1052",
          typeName:"水质污染",
          userName:"张三",
          eSource:"群众举报",
          riverId:"优",
          riverManage:"李四",
          regId:"3月"
        }
        ],
        listQuery: {
            
        },
        multipleSelection: [],
        currentPage4: 4,

      }
    },
  created() {//vue初始化函数，自动调用初始化数据
    this.getList(this.listQuery.baseUrl)
  },
  methods: {
    getList(url) {
      axios.get(url).then((response)=>{
        console.log(response)
        this.tableData3=response.data
      }).catch((error)=>{
        //错误信息
        console.log(error)
      })
    },
    //搜索功能
    handSearch(val){
      console.log(this.listQuery.baseUrl+'?name='+val)
      this.getList(this.listQuery.baseUrl+'?name='+val)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
      indexMethod(index) {
        return index+1;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      //条件筛选
      currentSel(selVal){
        this.selVal = selVal;
        this.dialogVisible = true;
      },
      //事件信息查看操作
      handleView(index, row){
        console.log(index, row);
      } 


  }
}
</script>

